<template>
  <div >
    <div v-if="statusCode" class="code-number">{{barcode}}</div>
    <div v-else class="code-number" @click="showCodeNumber">点击可查看付款码数字</div>
    <div class="code_container">
      <canvas style="width: 280px;height: 90px;" canvas-id="barcodeCanvas"/>
      <div style="height: 10px;width: 0"></div>
      <canvas style="width: 220px;height: 220px;" canvas-id="qrcodeCanvas"/>
    </div>
    <div class="refresh">
      <text class="refresh-code" @click="refresh">点击更新付款码</text>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
var QR =require( "../../utils/payCode/qrcode/qrcode.js" );
var barcode =require( "../../utils/payCode/qrcode/barcode.js" );
var UiUtils = require( "../../utils/payCode/UiUtils.js" );
var st;
export default {
  data () {
    return {
      barcode: '',
      statusCode:false
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'user_status'
    ])
  },
  methods: {
    render: function ( card ){
      var w = UiUtils.rpx2px( 660 )
      var h = UiUtils.rpx2px( 200 )
      barcode.createBarcode( 'barcodeCanvas', card, w, h );
      var w2 = UiUtils.rpx2px( 500 )
      QR.qrApi.draw( card, "qrcodeCanvas", w2, w2 );
      var code = barcode.formatBarCode( card, " " )
      this.barcode = code
    },
    refresh: function (){
      this.loadCardCode()
    },
    showCodeNumber(){
      this.statusCode = true
    },
    async loadCardCode(){
      //let cardcode = Math.floor(Math.random()*899999999999+100000000000);
      let payCode = await api.getPayCode({brand_id:this.user.brand_id, user_id: this.user.id})
      if (payCode.code == 0) {
        this.render( payCode.data.pay_code );
      }
    }
  },
  beforeMount(){
    console.log(this.user)
    if (!this.user || !this.user.id) {
      // 用户未授权
      let url = 'get_user_info?callback_url=pay_code'
      wx.redirectTo({
        url: url
      })
      return
    }

    wx.getScreenBrightness({
      success(res){
        wx.setStorageSync('screenBrightness', res.value)
      }
    })
  },
  mounted () {
    wx.setScreenBrightness({
      value: 0.8
    })
    this.loadCardCode()
    this.$options.interval = setInterval(this.loadCardCode, 180*1000)
  },
  onUnload(){
    clearInterval(this.$options.interval)
    wx.setScreenBrightness({
      value: wx.getStorageSync('screenBrightness')
    })
  }
}
</script>

<style >
.code-number{
  color: #333333;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.code_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  background-color: #f1f1f1;
  padding-top: 20px;
  padding-bottom:20px;
  margin-left:10px;
  margin-right:10px;
  border-radius: 10px;
}
.refresh{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.refresh-code{
  color: #333333;
  font-size: 18px;
  padding-right: 50px;
  padding-left: 50px;
  padding-top: 30px;
  padding-bottom: 15px;
}
</style>
